<template>
  <div class="log_bg">	
    <div class="top">
        <div class="logo"><a href="Index.html"><img src="../../assets/images/logo.png" /></a></div>
    </div>
	<div class="login">
    	<div class="log_img"><img src="../../assets/images/l_img.png" width="611" height="425" /></div>
		<div class="log_c">
        	<form>
            <table border="0" style="width:370px; font-size:14px; margin-top:30px;" cellspacing="0" cellpadding="0">
              <tr height="50" valign="top">
              	<td width="55">&nbsp;</td>
                <td>
                	<span class="fl" style="font-size:24px;">登录</span>
                    <span class="fr">还没有商城账号，<router-link  style="color:#ff4e00;" to="/regist">立即注册</router-link></span>
                </td>
              </tr>
              <tr height="100">
                <td>用户名</td>
                <td>
                    <input type="text" v-model="loginName" class="l_user" @blur="checkName" />
                    <span class="warn">{{ nameMsg }}</span>
                </td>
              </tr>
              <tr height="70">
                <td>密&nbsp; &nbsp; 码</td>
                <td>
                    <input type="password" v-model="password" @blur="checkPwd" class="l_pwd" />
                     <span class="warn">{{ pwdMsg }}</span>
                </td>
              </tr>
              <tr>
              	<td>&nbsp;</td>
                <td style="font-size:12px; padding-top:20px;">
                	<span style="font-family:'宋体';" class="fl">
                    	<label class="r_rad"><input type="checkbox" /></label><label class="r_txt">请保存我这次的登录信息</label>
                    </span>
                    <span class="fr"><a href="#" style="color:#ff4e00;">忘记密码</a></span>
                </td>
              </tr>
              <tr height="60">
              	<td>&nbsp;</td>
                <td><input type="submit" @click.prevent="login(loginName,password)" value="登录" class="log_btn" /></td>
              </tr>
            </table>
            </form>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name:'Login',
    data:function(){
        return{
            illegal:true,
            loginName:'',
            password:'',
            nameMsg:'',
            pwdMsg:''
        }
    },
    methods:{
        //表单校验
        checkName(){
            if(this.loginName ==''){
                this.nameMsg = '请填写登录名';
            }else{
                this.nameMsg = '';
            }
        },
        checkPwd(){
            if(this.password == ''){
                this.pwdMsg = '请填写密码';
            }else{
                this.pwdMsg = '';
            }
        },
        getCollects(){
            this.$axios({
                url:'/easybuy/collect/all',
            }).then(rs=>{
                //将收藏夹中的商品信息存到vuex中
                console.log("collectList:",rs.data.collectList);
                this.$store.commit('changeCollects',rs.data.collectList);
                window.sessionStorage.setItem('collects',JSON.stringify(rs.data.collectList));
            })
        },
        getCarts(){
            this.$axios({
                url:'/easybuy/cart/all'
            }).then(rs=>{
                //将购物车数据存放到vuex中
                window.sessionStorage.setItem('cartList',JSON.stringify(rs.data.productVoList));
                this.$store.commit('changeCartList',rs.data.productVoList);
                
            })
        },
        login(loginName,password){
            let flag = true;
            this.checkName();
            this.checkPwd();
            if(this.nameMsg!='' || this.pwdMsg !=''){
                return false;
            }
            this.$axios({
                method:'post',
                url:'/easybuy/user/login',
                data:{
                    loginName,
                    password
                }
            }).then(rs=>{
                console.log(rs);
                window.sessionStorage.setItem('userName',rs.data.userName);
                window.sessionStorage.setItem('token',rs.data.token);
                window.sessionStorage.setItem('userRole',rs.data.userRole);
                //使用vuex
                this.$store.commit('changeLoginStatus',true);
                this.$store.commit('getUserName',rs.data.userName);
                this.$store.commit('changeUserRole',rs.data.userRole);
                this.getCollects();
                this.getCarts();
                //跳转
                this.$router.push({name:'FrontIndex'});
            }).catch(rs=>{
                console.log("rs",rs);
            })
        }
    }
}
</script>

<style scoped>
    .warn{
        color:red;
        font-size:12px;
    }
</style>